[Day30] 終於來到了這一天～第二次鐵人賽完賽心得 && 梳理學習順序

2021 iThome 鐵人賽

DAY 30

自我挑戰組

Re: 從 Next.js 開始的 React 生活系列第 30 篇

13th鐵人賽

Ado Lin

2021-10-02 09:45:28

1165 瀏覽

分享至

各位觀眾！！！我脫出了！！！！！！
羨慕忌妒恨吧(# (好啦沒有，更多大大是 9/30 就完賽了XD)
能夠撐到這天首先我要感謝我的親友們....(咳咳，離題了)
其實這個系列文的產出應該要感謝鞭(ㄊㄨˊ)策(ㄉㄨˊ)我的前輩才對XD

今年鐵人賽開賽前，
其實去年的隊友們有在問說今年要不要報名，
但隊友們紛紛表示今年比較忙先 PASS，
而我自己心裡默默想要報名，
但真的驅動我報名的那根稻草(?)如同 Day1 文章說的，
那個「iThome 鐵人賽 - IT 人的奧運會」文宣吸引來的XD

本來還想說去年隊友會不會發現我今年偷偷報名的事，
但看來大家真的都很忙，
直到完賽這天還是沒人發現XD
(等我 po 出這篇文章後自己去跟隊友自首好了哈哈哈)

但今年真的有點忙，
其實中途也有幾次想過真的想放棄，
加上今年我一個人單打獨鬥，
沒有不發文會導致團滅的壓力，
所以能夠撐完這 30 天真的完全靠意志力XD
不過這 30 天文章對我來說是有收獲的，
並不純粹只是花時間寫文章而已，
從中我也學到了一些我之前不知道的知識，
甚至我前幾天寫前端時還打開我文章起來參考呢XD

落落長前言(?)講完了，
來做個系列文的 summary 吧！

今年這個系列文的標題是：
Re: 從 Next.js 開始的 React 生活

為什麼會下這個標題，
原因如同這個系列文的介紹所說，
大約去年鐵人賽快結束時，
前輩跟我介紹 Next.js 要我開始研究，
告訴我 Next.js 是採用 React 的框架，
嗯然後，我前面文章也有提到，
在這之前我根本沒學過 React，
連最基本的 JSX 語法，Bootstrap、Reactstrap 我都沒學過啊啊啊啊啊~~~~~

所以我一開始連這樣 Grid 的語法都看不懂~~~

<Row>
    <Col xs="6" md="4">.col-6 .col-md-4</Col>
    <Col xs="6" md="4">.col-6 .col-md-4</Col>
    <Col md="4">.col-md-4</Col>
</Row>

更不要說是這樣的 JSX 語法，

{status === 'initial' && (
        <>
          ... (略)
        </>
      )}

React 的 useState, useEffect 就更不用提了，
那對去年的我來說根本是無字天書XD

翻了一下去年 10 月的記錄，我還曾經丟給前輩這樣的訊息呢XD

我覺得我 React React.js Bootstrap Reactstrap 傻傻分不清楚orz 上網找資料有這些字眼的都看orz

就是因為什麼都還不會，所以連找資料都不知道從何找起的無助感XD

我的學習歷程是以 Next.js 開始的，
然後才開始學 Bootstrap, Reactstrap, React XDDDDDDD

但我在這個系列文有重新理過我覺得對新手比較友善的學習過程：
Bootstrap → Reactstrap → React → Next.js

下面讓我們一起回顧一下這個系列文的軌跡吧！

Phase 1 - 了解前端框架的好處

[Day2] 論前端框架的好處及重要性～從自己刻到學習共通語言（上篇）
[Day3] 論前端框架的好處及重要性～從自己刻到學習共通語言（下篇）

就我事後回顧的角度來說，
我覺得先讓學習前端框架的新手知道使用前端框架的好處及重要性不是壞事，
因為我還記得我去年剛接觸的時候還想說，
「CSS 我自己刻就好了啊，何必要學這些呢？」
後來發現我錯了XD

Phase 2 - 學習 Bootstrap

[Day4] 學 Bootstrap 是為了走更長遠的路～基本篇
 [Day5] 學 Bootstrap 是為了走更長遠的路～ Flex 篇
 [Day6] 學 Bootstrap 是為了走更長遠的路～ Grid 篇 (1)
[Day7] 學 Bootstrap 是為了走更長遠的路～ Grid 篇 (2)
[Day8] 學 Bootstrap 是為了走更長遠的路～下一站 ‧ Reactstrap

當然要直接跳過 Bootstrap 直接學 Reactstrap 不是問題，
但是除了 Grid 以外，Bootstrap 本身還是有提供很多語法可供使用，
所以還是得學，(不過如同我 Day8 文章說的，把 Bootstrap 當字典查就好XD)
既然還是得學，那不如學完再去學 Reactstrap 會比較好上手XD

Phase 3 - 學習 Reactstrap (+碰一點 React)

[Day9] Reactstrap = Bootstrap in React，你看離 React 越來越近了吧
 [Day10] 學 Reactstrap 就離 React 更近了～ Grid 篇‧最終回（應該是？
[Day11] 排版的小孩子才做選擇～ Grid 跟 Flex 我全都要！
[Day12] 學 Reactstrap 就離 React 更近了～ Component 的引入&使用
 [Day13] 學 Reactstrap 就離 React 更近了～ Navbar ‧ 初識篇
 [Day14] 學 Reactstrap 就離 React 不遠了～用 Navbar 認識 useState
[Day15] 學 Reactstrap 就離 React 不遠了～用 Tooltips 熟悉 useState
[Day16] 學 Reactstrap 就離 React 不遠了～用 Tooltips 認識 useEffect
[Day17] 學 Reactstrap 就離 React 不遠了～用 Spinners 搭配複習 Flex, useState, useEffect 三個願望一次滿足！

其實這也不只是在學 Reactstrap，因為 Reactstrap 是將 Bootstrap 用 React 的語法包裝起來，
所以用 Reactstrap 藉機碰一點 React 的東西，像是 useState, useEffect，
是很不錯的學習方式。
其實我去年剛開始學的時候，
在我什麼都還不會的情況下就看到了 Reactstrap 的 <Navbar> component 語法：

<Navbar light expand="md">
        <NavbarBrand href="/" className="mr-auto">reactstrap</NavbarBrand>
        <NavbarToggler onClick={toggleNavbar} className="mr-2" />
        <Collapse isOpen={!collapsed} navbar>
          <Nav navbar>
            <NavItem>
              <NavLink href="https://reactstrap.github.io/components/alerts/">關於我</NavLink>
            </NavItem>
            ... (略)
          </Nav>
        </Collapse>
      </Navbar>

我看到這些想說這是什麼XDDDDD
舉凡 expand="md",<NavbarToggler>, <Collapse>.....
這些對我來說都是第一次看到的語法，
完全看不懂XD
(其實與其說是不懂，應該是說我連對這樣的語法 sense 都沒有orz)

所以我前面才要先用 Bootstrap 裡的 Grid 來銜接切入 Reactstrap，
再拿一些比較簡單的 component (Table, Badges, Tooltips) 來做切入，
才不會消化不良XD

Phase 4 - 從頭打 React 基礎

這一段其實對我來說算有點意外XD
因為我也是在中途才突然發現 Codecademy 有 React 教學！
然後學了才發現原來 React 有三種寫法，
我之前只會有 Hook 的那一種XD
難怪之前網路上很多範例的語法我看不懂orz
而且 Codecademy 超佛心，
前面先科普 JSX 語法，
(在學到這邊之前有的寫法我還誤以為是 React 專屬語法呢XD)
再循序漸進的把 React 慢慢教給你，
經過這邊的洗禮後，
雖然不敢說完全懂了，
但至少看到像 this.props, this.state... 那種語法我不會再逃避了XD

Phase 5 - 快快樂樂用 Next.js

[Day28] 又回到最初的起點～ Next.js
[Day29] 倒數第二天～集大成！Next.js + React + Bootstrap + Reactstrap 十八般武藝（？）樣樣來，勇敢的上吧！

有了前面的基礎再回來看 Next.js 根本就是「桌頂拈柑」！
(註：「桌頂拈柑」是台語諺語，用手指頭拈取桌上的橘子，比喻事情極其容易。)
當然 Next.js 本身還有一些提供一些好用的語法，
像是 useRouter 可以拿來做網址參數的 query ......等等，
但我太晚讓 Next.js 登場了，
所以來不及講到XD
有興趣的可以看之前大大在鐵人賽寫的 Next.js 系列文XD

回顧系列文，
覺得標題下得真好XD

Re: 從 Next.js 開始的 React 生活

我自己從 Next.js 開始了 React 的學習之路，
但我又 Re: 一次從頭開始再慢慢走到 Next.js。

今年這個系列文雖然沒有參加團體賽，
雖然瀏覽次數沒有比去年多，
但是今年的參賽我自己覺得比去年還滿意呢！

文章差不多來到尾聲，
明年會不會參賽我真的不知道，
但哪那麼巧，
每次鐵人賽都剛好在學新東西，
也許明年的鐵人賽會寫 Chakra UI 的學習文也說不定呢XD
(不要亂挖坑給自己跳啊!!!!!!!!!!)

那麼大家再會啦~~~~~
還在坑裡的大大們加油~~~~~~
我出運啦XDDDDDD

最後再次賀 Re: 從 Next.js 開始的 React 生活 系列文完結灑花！！！
☆,::‧(￣▽￣)/‧:‧°☆
☆,::‧(￣▽￣)/‧:‧°☆
☆,::‧(￣▽￣)/‧:‧°☆

(當然要跟標題梗致敬一下XD)